@import "@{root}/style/mixins/card-border-rounded";
@import "@{root}/style/mixins/button-reset";
@import "@{icon}";
.audio-item {
    .button-reset;
    .card-border-rounded;
    box-sizing: border-box;
    padding: 32rpx;
    color: fade(#3e3e3e,30%);
    &.published {
        .infos {
            color: fade(#000,54%);
        }
        .title {
            color:fade(#000,87%);
        }
        .icon-btn-play,
        .icon-btn-read {
            color:fade(#000,87%);
        }
    }
    .playing,
    .icon-btn-play,
    .icon-btn-read {
        margin-right: 24rpx;
    }
    .playing {
        color: #48b2a5 !important;
    }
    .infos {
        display: flex;
        font-size: 26rpx;
        line-height: 32rpx;
        align-items: center;
        margin-bottom: 20rpx;
        .chapter {
            flex-grow: 0;
            flex-shrink: 0;
        }
        .trial {
            flex-grow: 0;
            flex-shrink: 0;
            margin-left: 10rpx;
            padding: 0 10rpx;
            font-size: 22rpx;
            line-height: 32rpx;
            height: 32rpx;
            color: #48b2a5;
            border: 1rpx solid #48b2a5;
            border-radius: 6rpx;
        }
        .new {
            color: #ff5e4b;
            margin-left: 10rpx;
        }
        .lateset-played {
            color: #48b2a5;
            margin-left: 10rpx;
        }
        .duration {
            position: relative;
            flex-grow: 1;
            flex-shrink: 1;
            text-align: right;
            .inner {
                margin-left: 12rpx;
            }
        }
    }
    .main {
        display: flex;
        align-items: center;
        .title {
            flex-grow: 1;
            flex-shrink: 1;
            //min-height: 88rpx;
        }
        .status {
            flex-grow: 0;
            flex-shrink: 0;
            font-size: 44rpx;
            padding-left: 138rpx;
            &.disabled {
                color: fade(#3e3e3e,30%) !important;
                .icon-btn-play,
                .icon-btn-read {
                    color: fade(#3e3e3e,30%) !important;
                }
            }
        }
        .buy-btn {
            font-size: 32rpx;
            color: #48b2a5;
        }
        .unpublished {
            font-size: 32rpx;
        }
    }
}
